<template>
    <div style="color: #fff;">
        <div class="commenttop">
            <span>评论</span><span>{{ comments.length }}</span>
        </div>
        <div v-if="comments.length > 0">
            <!-- 评论盒子 -->
            <div class="commentbox" v-for="(comment, index) in comments" :key="index">
                <div class="commentgay">
                    <div class="avata">
                        <img :src="require('../../../../server/public/images/user/avata/' + comment.authorAvata)" alt="">
                    </div>
                    <div class="user">
                        <p>{{ comment.author }}</p>
                        <span>{{ comment.createdAt }}</span>
                    </div>
                    <div class="tools">
                        <span class="iconfont icon-pinglun"></span>
                        <span class="iconfont icon-dianzan"></span>
                    </div>
                </div>
                <!-- 评论内容 -->
                <p class="content">{{ comment.content }}</p>
            </div>
        </div>
        <!-- 如果没有评论，则显示暂无评论 -->
        <div v-else class="nocomments">
            暂无评论~~
        </div>
        <br>
        <el-form class="commentsubmit">
            <!-- 登录-输入 -->
            <el-form-item v-if="isLogin">
                <el-input
                type="text"
                placeholder="请输入评论内容"
                v-model="content">
                </el-input>
            </el-form-item>
            <!-- 未登录-输入 -->
            <el-form-item v-if="!isLogin" disabled="true">
                <el-input
                type="text"
                placeholder="你还没有登录~"
                v-model="content">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-if="isLogin" type="primary" @click="submitComment">发表</el-button>
                <el-button v-if="!isLogin" type="primary" @click="submitComment">去登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

import { mapState } from 'vuex';

import { getComments, submitComment } from '@/api/comments'

export default {
    name: 'CommentList',

    // 接收路由传入文章的id
    props: {
    articleId: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            comments: [], // 评论列表
            content: '', // 评论内容
        }
    },
    computed: {
        ...mapState(['userinfo','isLogin'])
    },
    created(){
        this.getComments();
    },
    mounted() {
        console.log(this.$attrs.parent);
        console.log(this.isLogin);
        console.log("这个篇文章的id是" + this.articleId);

        console.log('用户账号：' + this.userinfo[0].user)
    },
    methods: {
         // 获取评论列表
        getComments() {
            const params = {
                articleId: this.articleId
            }
            getComments(params).then((res)=>{
                this.comments = res.data.data
                // console.log(this.comments);
            }).catch((err)=>{
                console.log(err);
            })
        },

        // 提交评论
        submitComment() {
            if(this.isLogin){
                let type = null
                if (this.$attrs.parent == 'news'){
                    type = 'news'
                }else if(this.$attrs.parent == 'post'){
                    type = 'post'
                }
                const author = this.userinfo[0].name
                const authorAvata = this.userinfo[0].avata
                const params = {
                    articleId: this.articleId,
                    content: this.content,
                    author: author,
                    authorAvata: authorAvata,
                    type: type
                };
                submitComment(params).then((res)=>{
                    this.getComments(); // 提交成功后重新获取评论列表
                    this.content = ''; // 清空评论内容
                    
                }).catch(err => {
                    console.log(err);
                });
            }else{
                console.log("你需要先登录")
                this.$router.push('/user/login')
            }
        }
    },
};
</script>
<style lang="scss">
@import '@/assets/css/pub/commentList.scss'
</style>
